
<template>
  <div id="myChart"></div>
</template>
 
<script>
import { queryLeveLAvePrice } from "@/network/home";
export default {
  name: "App",
  data() {
    return {
      mychartData: [],
    };
  },
  mounted() {
    this.queryLeveLAvePrice();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        legend: {
          right: "0%",
          bottom: "0%",
          itemWidth: 12,
          itemHeight: 12,
          orient: "horizontal",
          itemGap: 10,
          textStyle: {
            color: "#000",
            fontSize: 13,
          },
        },
        xAxis: {
          data: ["一等座", "二等座", "无座"],
        },
        yAxis: {},
        series: [
          {
            name: "均价",
            type: "bar",
            data: this.mychartData,
            color: "#8B78F6",
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5,
            },
          },
        ],
      });
    },
    // 把后端返回的数据转换成组件可以用的数据
    transformData(arr) {
      let first = 0;
      let first_num = 0;
      let second = 0;
      let second_num = 0;
      let noseat = 0;
      let noseat_num = 0;
      arr.forEach((item) => {
        console.log(item);
        if (item["first_ticket_price"] != "None") {
          first += parseInt(item["first_ticket_price"]);
          first_num++;
        }
        if (item["second_ticket_price"] != "None") {
          second += parseInt(item["second_ticket_price"]);
          second_num++;
        }
        if (item["noseat_ticket_price"] != "None") {
          noseat += parseInt(item["noseat_ticket_price"]);
          noseat_num++;
        }
      });
      let first_ave = first / first_num;
      let second_ave = second / second_num;
      let noseat_ave = noseat / noseat_num;
      console.log("[]", [first_ave, second_ave, noseat_ave]);
      return [first_ave, second_ave, noseat_ave];
    },
    queryLeveLAvePrice() {
      queryLeveLAvePrice()
        .then((res) => {
          // console.log('queryLeveLAvePrice',res.data);
          this.mychartData = this.transformData(res.data);
          console.log("mychartdata");
          this.drawLine();
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
#myChart {
  width: 300px;
  height: 350px;
  /* background-color: #afc; */
  margin: 0 auto;
}
</style>